<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar">
      <template #title>
        <div class="title-box">
          <van-button
            class="search-btn"
            type="info"
            size="small"
            round
            icon="search"
            to="/search"
          >
            搜索
          </van-button>
          <van-icon name="wap-nav" @click="openChannelEditPopup" />
        </div>
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 不能直接使用 v-model 绑定 vuex 中的 state，因为只有 mutation 才有权利修改 state -->
    <!-- 这里可以借助计算属性的完整写法 -->
    <van-tabs v-model="activeChannelId">
      <!-- 如果 van-tab 有 name 属性，那么 上面的 van-tabs 组件绑定的 v-model 就会取 name 属性值 -->
      <van-tab
        v-for="v of $store.state.channel.curUserChannels"
        :key="v.id"
        :title="v.name"
        :name="v.id"
      >
        <div class="channel-content-box">
          <ArticleList :channelId="v.id" />
        </div>
      </van-tab>
    </van-tabs>

    <!-- 编辑频道弹出层 -->
    <ChannelEditPopup />
  </div>
</template>

<script>
import ArticleList from './components/ArticleList/index'
import ChannelEditPopup from './components/ChannelEditPopup/index'
export default {
  name: 'HomePage',
  components: { ArticleList, ChannelEditPopup },
  data() {
    return {
      // 这个属性可能在频道编辑中还要使用，所以干脆放到 Vuex 中去
      // active: 0,
    }
  },
  computed: {
    // 计算属性的完整写法
    activeChannelId: {
      get() {
        return this.$store.state.channel.activeChannelId
      },
      set(newValue) {
        this.$store.commit('channel/changeActiveChannelId', newValue)
      },
    },
  },
  methods: {
    openChannelEditPopup() {
      this.$store.commit('channel/openChannelEditPopup')
      // 去请求所有的频道
      this.$store.dispatch('channel/loadAllChannels')
    },
  },
  created() {
    this.$store.dispatch('channel/loadCurUserChannels')
    // this._apis.channel.getCurUserChannels().then(res => {
    //   console.log(res, 'res')
    // })
  },
}
</script>

<style scoped lang="less">
.home-container {
  // background-color: #fff;

  .channel-content-box {
    height: calc(100vh - 280px);
    overflow-y: auto;
  }

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 40px;
    i {
      font-size: 56px;
    }
  }

  /deep/.van-tabs__line {
    background-color: #3296fa;
  }

  // /deep/ 是样式穿透语法，如果 style 标签添加了 scoped，那么该组件的样式会隔离（给每个元素添加一个随机的自定义属性 data-v-xxx）
  // 什么时候需要使用样式穿透呢？
  // -- 当 当前组件的模板中 找不到该元素，是某个子组件内部的元素，那么就需要使用样式穿透
  /deep/.van-nav-bar__title {
    max-width: unset;
    width: 100%;
  }
  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }
}
</style>
